<template>
  <div>
    <h1 v-color="'#ff4200'">自定义组件</h1>
    <button v-copy="message">复制</button>
    <input v-focus type="text" name="" id="" />
    {{ foo }}
    <a href="https://www.jianshu.com/p/48259d9ec4b8"
      >https://www.jianshu.com/p/48259d9ec4b8</a
    >
  </div>
</template>
<script>
const myMixin = {
  data() {
    return {
      message: "hello",
      foo: "abc",
    };
  },
};
export default {
  name: "direct",
  mixins: [myMixin],
  directives: {
    color: {
      //指令名要加上引号
      inserted: function (el, binding) {
        el.style.color = binding.value;
      },
    },
    focus: {
      inserted: function (el) {
        // 聚焦元素
        el.focus();
      },
    },
  },
  data() {
    return {
      message: "goodbyes",
      bar: "def",
    };
  },
};
</script>
